<template>
  <div class="aiseo-report">
    <div class="top-nav"></div>
    <div class="main-content">
      <section class="left-main">
        <div class="list-box">
          <div class="value-item target-energy">
            <div class="target-value-desc">
              <div class="values-box">0%</div>
              <div class="item-desc">AI节能</div>
            </div>
          </div>
          <div class="value-item">
            <h3 class="item-name">站厅</h3>
            <div class="item-value-desc">
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.ZTWD }}</span>
                  <i>℃</i>
                </span>
                <p class="item-desc">温度</p>
              </div>
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.ZTSD }}</span>
                  <i>%</i>
                </span>
                <p class="item-desc">湿度</p>
              </div>
            </div>
          </div>
          <div class="value-item">
            <h3 class="item-name">站台</h3>
            <div class="item-value-desc">
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.ZTAWD }}</span>
                  <i>℃</i>
                </span>
                <p class="item-desc">温度</p>
              </div>
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.ZTASD }}</span>
                  <i>%</i>
                </span>
                <p class="item-desc">湿度</p>
              </div>
            </div>
          </div>
          <div class="value-item">
            <h3 class="item-name">外气</h3>
            <div class="item-value-desc">
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.WQHZ }}</span>
                  <i>kj/kg</i>
                </span>
                <p class="item-desc">焓值</p>
              </div>
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.WQWD }}</span>
                  <i>℃</i>
                </span>
                <p class="item-desc">湿球温度</p>
              </div>
            </div>
          </div>
          <div class="value-item">
            <h3 class="item-name">实时制冷量</h3>
            <div class="item-value-desc">
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.SSZLL }}</span>
                  <i>kW</i>
                </span>
                <p class="item-desc">制冷量</p>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-box">
          <ul class="ul-item">
            <li class="li-item">
              <div class="cold-img"></div>
              <div class="num-item">冷却塔</div>
              <div class="detail-desc">
                <div class="top01">
                  <div class="ss">
                    <span class="ss1"></span>
                    <span class="ss2">当前</span>
                    <span class="ss3"></span>
                    <span class="ss8">AI推荐</span>
                  </div>
                  <div class="ss">
                    <span class="ss1">开机台数</span>
                    <span class="ss2">{{ lqtData && lqtData }}</span>
                    <span class="ss3"><span class="arrow-icon"></span></span
                    ><span class="ss4"
                      ><span class="bg-text">{{
                        lqtData && lqtData
                      }}</span></span
                    >
                  </div>
                </div>
                <p class="is-check">继续保持！</p>
              </div>
            </li>

            <li class="li-item">
              <div class="cold-beng1"></div>
              <div class="num-item">冷却泵</div>
              <div class="detail-desc">
                <div class="top01">
                  <div class="ss">
                    <span class="ss1"></span>
                    <span class="ss2">当前</span>
                    <span class="ss3"></span>
                    <span class="ss8">AI推荐</span>
                  </div>
                  <div class="ss">
                    <span class="ss1">频率(Hz)</span>
                    <span class="ss2">{{ lqbData && lqbData }}</span>
                    <span class="ss3"><span class="arrow-icon"></span></span
                    ><span class="ss4"
                      ><span class="bg-text">{{
                        lqbData && lqbData
                      }}</span></span
                    >
                  </div>
                </div>
                <p class="is-check">继续保持！</p>
              </div>
            </li>

            <li class="li-item">
              <div class="cold-beng1"></div>
              <div class="num-item">冷冻泵</div>
              <div class="detail-desc">
                <div class="top01">
                  <div class="ss">
                    <span class="ss1"></span>
                    <span class="ss2">当前</span>
                    <span class="ss3"></span>
                    <span class="ss8">AI推荐</span>
                  </div>
                  <div class="ss">
                    <span class="ss1">频率(Hz)</span>
                    <span class="ss2"> {{ ldbData && ldbData }} </span>
                    <span class="ss3"><span class="arrow-icon"></span></span
                    ><span class="ss4"
                      ><span class="bg-text">{{
                        ldbData && ldbData
                      }}</span></span
                    >
                  </div>
                </div>
                <p class="is-check">继续保持！</p>
              </div>
            </li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
export default {
  name: "AiseoComponent",
  props: ["topitemdata", "lqtData", "lqbData", "ldbData"],
  data() {
    return {};
  },
  methods: {},
  computed: {},
};
</script>
<style lang="less" scoped>
.aiseo-report {
  width: 100%;
  height: 100%;
  .top-nav {
    width: 10rem;
    height: 0.41rem;
  }
  .main-content {
    width: 10rem;
    height: calc(100% - 0.5rem);
    position: relative;
    display: flex;
    .left-main {
      width: 88%;
      height: 100%;
      margin: 0 auto;
      .list-box {
        width: 100%;
        height: 160px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        // background-color: #647184;
        .value-item {
          width: 200px;
          height: 120px;
          margin: 0 10px;
          background: linear-gradient(
            0deg,
            rgba(2, 51, 90, 0.32),
            rgba(2, 27, 46, 0.32)
          );
          opacity: 0.8;
          // border: 1px solid #2ab2ff;
          border-radius: 6px;
          .item-name {
            text-align: center;
            // margin: 5px 0 20px 0;
            height: 35px;
            font-size: 18px;
            font-weight: 400;
            color: #84bfdd;
            line-height: 28px;
          }
          .item-value-desc {
            display: flex;
            width: 100%;
            height: 65px;
            // background-color: #fff;
            font-size: 18px;
            .values-box {
              width: 100%;
              height: 80px;
              // background-color: #3fa843;
              text-align: center;
              .item-value {
                font-size: 18px;
                padding: 8px 0;
                color: #ffffff;
                i {
                  font-size: 18px;
                }
              }
              .item-desc {
                color: #84bfdd;
                // background-color: #fff;
                padding: 12px 0;
                line-height: 22px;
                font-size: 14px;
              }
            }
          }
        }
        .target-energy {
          width: 160px;
          height: 160px;
          background: url("../../assets/img/sc.png") no-repeat center;
          background-size: cover;
          .target-value-desc {
            text-align: center;
            height: 160px;
            .values-box {
              font-size: 30px;
              color: #2ae185;
              font-weight: bold;
              width: 100%;
              height: 80px;
              line-height: 106px;
            }
            .item-desc {
              height: 80px;
              line-height: 32px;
              width: 100%;
              font-size: 20px;
              color: #2ae185;
              font-weight: bold;
            }
          }
        }
      }
      .detail-box {
        width: 100%;
        height: calc(100% - 160px);
        // background: #664e4e;
        .ul-item {
          width: 100%;
          height: 100%;
          margin: 0 auto;
          overflow: hidden;
          display: flex;
          justify-content: space-around;
          .li-item {
            width: 420px;
            height: 720px;
            padding-left: 14px;

            color: #fff;
            text-align: center;
            font-size: 30px;
          }

          .num-item {
            height: 30px;
            font-size: 30px;
            font-weight: bold;
            color: #fefefe;
            line-height: 24px;
          }
          .cold-img {
            width: 100%;
            height: 35%;
            background: url("../../assets/img/bta1.png") no-repeat center center;
            background-size: contain;
          }
          .cold-beng1 {
            width: 100%;
            height: 35%;
            background: url("../../assets/img/beng1.png") no-repeat center
              center;
            background-size: contain;
          }

          .run-time-item {
            width: 100%;
            height: 8%;
            display: flex;
            justify-content: center;
            align-items: center;
            .span1 {
              width: 24px;
              height: 24px;
              line-height: 24px;
              background: url("../../assets/img/run-title.svg") no-repeat center;
            }
            .span2 {
              color: #84bfdd;
              font-size: 24px;
              margin: 0 20px;
              // background-color: #fceb28;
            }
            .span3 {
              color: #fceb28;
              font-size: 24px;
            }
          }
          .detail-desc {
            width: 380px;
            margin: 0 auto;
            height: 45%;
            background: url("../../assets/img/k-x.png") no-repeat top center;
            background-size: 100% 100%;
            .top01 {
              height: 84%;
              margin-top: 6px;
              padding-top: 20px;
              display: flex;
              flex-direction: column;
              .ss {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: 18px;
                .ss1 {
                  width: 30%;
                  display: flex;
                  justify-content: center;
                }
                .ss2 {
                  width: 20%;
                  display: flex;
                  justify-content: center;
                }
                .ss3 {
                  width: 20%;
                  display: flex;
                  justify-content: center;
                  .arrow-icon {
                    display: inline-block;
                    width: 26px;
                    height: 20px;
                    background: url("../../assets/img/jt.svg") no-repeat top
                      center;
                    background-size: cover;
                  }
                }
                .ss4 {
                  width: 30%;
                  height: 52px;
                  line-height: 35px;
                  // background-color: #fff;
                  .bg-text {
                    display: inline-block;
                    margin-top: -12px;
                    width: 100%;
                    height: 100%;
                    background-color: #fff;
                    background: url("../../assets/img/s.png") no-repeat center
                      center;
                    background-size: 80%;
                  }
                }
                .ss8 {
                  width: 30%;
                }
              }
            }
            .desc-title {
              width: 138px;
              height: 30px;
              font-size: 20px;
              margin: 0 auto;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #fefefe;
              line-height: 24px;
              text-align: center;
              background: linear-gradient(0deg, #3b98d9 0%, #3ce69c 100%);
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            .category-title {
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 10px 0;
              span {
                width: 100%;
                padding-left: 32px;
                height: 30px;
                color: #84bfdd;
                font-size: 20px;
                text-align: center;
              }
              .now {
                text-align: right;
              }
            }
            .is-check {
              height: 21px;
              font-size: 20px;
              font-weight: 400;
              color: #0074b6;
              line-height: 24px;
            }
          }
        }
      }
    }
  }
}
</style>
